<template>
    <div class="w100 f-grow p20">
        <div class="f16 fw5 fam mb20 h-start-center">
            <div class="apply-item-icon mr15"></div>
            资料审核
        </div>
        <a-form-model
            :model="form"
            ref="form"
            :rules="rules"
            :colon="false"
            class="m-form-model"
            labelAlign="left"
            layout="vertical"
            :wrapperCol="{ span: 12 }"
        >
            <a-row type="flex" justify="start" :gutter="10">
                <a-col :span="12" class="mb16" v-for="(item, index) in list" :key="index">
                    <a-form-model-item :label="item.label" :prop="item.key">
                        <a-upload
                            v-if="item.formType === 'upload'"
                            :before-upload="beforeUpload"
                            :action="uploadFileUrl"
                            name="file"
                            :multiple="false"
                            :disabled="!isEdit || $store.state.userInfo.roleCode > 2"
                            @change="uploadFileChange($event, item.key)"
                            :accept="fileType"
                            :default-file-list="form[item.key]"
                            :headers="{
                                token: fileToken,
                            }"
                            @preview="previewFile"
                        >
                            <a-button v-if="!form[item.key]">
                                <a-icon type="upload" />
                                上传pdf文件
                            </a-button>
                        </a-upload>
                        <a-input
                            :disabled="!isEdit || $store.state.userInfo.roleCode > 2"
                            v-if="item.formType === 'input'"
                            v-model="form[item.key]"
                            placeholder="请输入"
                        />
                        <el-date-picker
                            :disabled="!isEdit || $store.state.userInfo.roleCode > 2"
                            size="small"
                            v-if="item.formType === 'date'"
                            v-model="form[item.key]"
                            @blur="timeChange"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期"
                        ></el-date-picker>
                    </a-form-model-item>
                </a-col>
            </a-row>
        </a-form-model>
        <Footer
            :isShowSave="isShowSave"
            @save="save"
            @back="back"
            @previousStep="previousStep"
            @nextStep="nextStep"
            :isShowNext="$store.state.userInfo.roleCode > 2"
            :isShowPrevious="true"
            :isShowSubmit="isEdit && $store.state.userInfo.roleCode === 2"
        ></Footer>
    </div>
</template>

<script>
import { getFileToken } from '@/common/api/common'
import url from '@/common/url-config.js'
import mixin from './mixin'
export default {
    mixins: [mixin],
    props: {
        list: {
            type: Array,
        },
    },
    data() {
        return {
            fileType: '.pdf',
            uploadFileUrl: url.uploadFile,
            fileToken: '',
            form: this.record?.fhqk ? JSON.parse(this.record.fhqk) : {},
            rules: {},
        }
    },
    mounted() {
        setTimeout(() => {
            this.init()
        }, 100)
    },
    methods: {
        timeChange(val) {
            this.form = { ...this.form }
        },
        init() {
            let form = {}
            const rules = {}
            if (this.record?.fhqk) {
                form = JSON.parse(this.record.fhqk)
            }
            this.list.forEach((item, index) => {
                form[item.key] = form[item.key]
                rules[item.key] = [
                    {
                        trigger: 'blur',
                        message: '该项未填写',
                        required: item.required,
                    },
                ]
            })
            this.form = form
            this.rules = rules
        },
        previewFile(file) {
            let { uid: fileId, name: fileName } = file
            let fileType = 'pdf'
            const fileSrc = `/file/api/Preview/v1/${fileId}`
            if (fileType === 'pdf') {
                this.fileSrc = `/pdfjs-2.6.347-dist/web/viewer.html?file=${fileSrc}&saveName=${fileName}`
            } else if (fileType === 'other') {
                this.fileSrc = `https://view.officeapps.live.com/op/embed.aspx?src=https://api-file.scdem.cn/api/Preview/v1/${fileId}`
            } else {
                this.fileSrc = fileSrc
            }
            let routeUrl = this.$router.resolve({
                path: '/preview',
                query: { fileSrc: this.fileSrc },
            })
            window.open(routeUrl.href, '_blank')
        },
        uploadFileChange(info, key) {
            let fileList = [...info.fileList]
            let file = fileList[0] || {}
            if (fileList.length > 0) {
                if (file.response && file.status === 'done') {
                    let fileRes = file.response.data
                    file.uid = fileRes.id
                    file.url = fileRes.id // 给file赋url字体才能变蓝
                    this.form[key] = [
                        {
                            uid: fileRes.id,
                            url: fileRes.id,
                            name: fileRes.name,
                            status: 'done',
                        },
                    ]
                }
            } else {
                this.form[key] = null
            }

            if (file.status === 'error') {
                if (file.response.errorCode === 401) {
                    this.$notification401(file.response.message)
                }
                file.response = file.response.message || '服务器异常'
            }
        },
        async beforeUpload(file) {
            return await getFileToken({ file })
                .then(res => {
                    this.fileToken = res?.data?.token
                    return Promise.resolve()
                })
                .catch(() => {
                    return Promise.reject()
                })
        },
        async saveApi() {
            if (!this.form['网站公示图片'] && !this.form['网站公示网址']) {
                return this.$message.error('网站公示图片与网址需至少填写一个')
            }
            this.Bus.$emit('loadingStateChange', true)

            try {
                let params = {
                    jsonRecord: JSON.stringify(this.form),
                    reason: '',
                    id: this.record.id,
                }
                let res = await this.checkApi.pass(params)
                if (res.code == 200) {
                    this.$message.success(res.message)
                    this.back()
                }
            } catch (e) {
                console.log(e)
            }
            this.Bus.$emit('loadingStateChange', false)
        },
    },
}
</script>

<style lang="scss" scoped></style>
